<script type="text/ng-template" id="vm_workflow.html">
<div class="modal-header">
    <a class="close" ng-click="close()">×</a>

    <div class="input-prepend input-append">
        <button type="button" class="btn {{ step01_style }}" ng-click="jump(1)">I.设置</button>
        <button type="button" class="btn {{ step02_style }}" ng-click="jump(2)">II.选择模版或ISO</button>
        <button type="button" class="btn {{ step03_style }}" ng-click="jump(3)">III.选择计算方案</button>
        <!--<button type="button" class="btn {{ step03_style }}" ng-click="jump(3)">IV.选择网络规则</button>-->
        <button type="button" class="btn {{ step04_style }}" ng-click="jump(4)">VI.确认</button>
    </div>
</div>
<form class="form-horizontal" name='vm_form'>
<div class="modal-body">

<!----------step01-------------->
<fieldset ng-show="current_step==1">
    <legend>{{ steps[0]}}</legend>
    <div class="row-fluid">
        <div class="span8">
            <div class="form-horizontal">
                <div class="control-group">
                    <label class="control-label">集群：</label>

                    <div class="controls">
                        <select name='cluster' ng-options="c.name for c in clusters" required class="span5"
                                ng-model="inst.cluster">
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">主机(可不选)：</label>

                    <div class="controls">
                        <select ng-model="inst.host" ng-options="h.host_name for h in inst.cluster.server_set"
                                class="span5">
                            <option value="">自动选择</option>
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">名字：</label>

                    <div class="controls">
                        <input type="text" name="vm_name" ng-model="inst.name" required class="input"
                               placeholder="虚拟机名称" ng-pattern="/^\w+$/"/>

                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">显示设置：</label>

                    <div class="controls">
                        <select ng-model="inst.graphics_type" required class="span5"
                                ng-options="v for v in graphics_types">
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">虚拟机描述：</label>

                    <div class="controls">
                        <textarea ng-model="inst.desc"></textarea>
                    </div>
                </div>
                 <div class="control-group">
                    <label class="control-label">用户：</label>

                    <div class="controls">
                        <select ng-options="user.username for user in users" ng-model="inst.user"></select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>
<!----------step02-------------->

<fieldset ng-show="current_step==2">
    <legend>{{ steps[1]}}</legend>

    <div class="row-fluid step-pos">
        <div class="span7">
            <div class="form-horizontal">
                <label class="radio">
                    <input type="radio" ng-model="template" value="image">
                    <h5>模板 &nbsp;&nbsp;可用于启动虚拟机的操作系统映像</h5>

                    <div class="control-group">
                        <label class="control-label">模板:</label>

                        <div class="controls">
                            <select class="span8" ng-disabled="template!='image'"
                                    ng-model="inst.source" ng-options="t.name for t in templates">
                            </select>
                        </div>
                    </div>
                </label>
                <label class="radio">
                    <input type="radio" ng-model="template" value="iso">
                    <h5>ISO &nbsp;&nbsp;包含操作系统的数据或可启动介质的磁盘映像</h5>

                    <div class="control-group">
                        <label class="control-label">ISO文件:</label>

                        <div class="controls">
                            <select class=""
                                    ng-options="iso.name group by iso.storage for iso in isos"
                                    ng-disabled="template!='iso'" ng-model="inst.source">
                            </select>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">操作系统:</label>

                        <div class="controls">
                            <select class="" ng-options="os.name for os in ostypes"
                                    ng-disabled="template!='iso'" ng-model="inst.os_type">
                            </select>
                            <label>{{ inst.os_type.desc }}</label>
                        </div>
                    </div>
                </label>
            </div>
        </div>
        <div class="span5">
            <div class="alert alert-info alert-pos">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <h4>注!</h4>
                可以从已有模板创建虚拟机，也可以从ISO创建全新虚拟机，
                <br>一般从ISO创建全新虚拟机是为了在生成虚拟机后生成模板。模板和iso都是可选的。
            </div>
        </div>
    </div>
</fieldset>

<!----------step03-------------->

<fieldset ng-show="current_step==3">
    <legend>{{ steps[2]}}</legend>

    <div class="row-fluid step-pos">
        <div class="span7">
            <div class="form-horizontal">
                <label class="radio">
                    <input type="radio" ng-model="config" value="p">
                    <h5>方案 &nbsp;&nbsp;选择已有的方案</h5>

                    <div class="control-group">
                        <label class="control-label">方案:</label>

                        <div class="controls">
                            <select ng-disabled="config!='p'" class="span8" ng-model="proposal"
                                    ng-options="p.name for p in proposals" ng-change="proposalchange(proposal)">
                            </select>
                        </div>
                    </div>
                </label>
                <label class="radio">
                    <input type="radio" ng-model="config" value="c">
                    <h5>自定义 &nbsp;&nbsp;定义配置，并可存为方案</h5>

                    <div class="control-group">
                        <label class="control-label">CPU:</label>

                        <div class="controls">
                            <input name="vm_cpu" ng-model="inst.cpu" required ng-disabled="config!='c'" type="text"
                                   class="input-mini"
                                   value="{{ proposal.cpu }}" ng-pattern="/^[1-8]{0,1}$/"/> 个

                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">内存:</label>

                        <div class="controls">
                            <input name='mem' ng-model="inst.mem" required ng-disabled="config!='c'" type="text"
                                   class="input-mini"
                                   value="{{ proposal.memory }}"/> MB
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">磁盘大小:</label>

                        <div class="controls">
                            <input name='disk' ng-model="inst.disk" required ng-disabled="config!='c' || inst.storage.protocol=='iscsi'" type="text"
                                   class="input-mini"
                                   value="{{ proposal.disk }}"/> GB
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">磁盘驱动:</label>

                        <div class="controls">
                            <select class="span4" ng-model="inst.disk_bus" ng-disabled="config!='c' || inst.storage.protocol=='iscsi'">
                                <option value="ide">IDE</option>
                                <!--<option>rdp</option>-->
                                <option value="virtio">virtio</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">存储:</label>

                        <div class="controls">
                            <select name='storage' ng-disabled="config!='c'" required class="span8" ng-model="inst.storage"
                                    ng-options="s.name for s in storages" ng-change="storagechange()">
                            </select>
                        </div>
                    </div>
                    <div class="control-group" ng-show="showlun">
                        <label class="control-label">LUN:</label>

                        <div class="controls">
                            <select name='storage' ng-required="showlun" class="span8" ng-model="inst.lun"
                                    ng-options="s.display group by s.type for s in inst.luns" ng-change="lunchange()">
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">网络:</label>

                        <div class="controls">
                            <select name='network' ng-disabled="config!='c'" required class="span8" ng-model="inst.network"
                                    ng-options="n.name for n in networks" ng-change="load_fixedips(inst.network)">
                            </select>
                        </div>
                    </div>
                    <div class="control-group"
                         ng-show="(inst.network.networktype==2||inst.network.networktype==3)&&inst.network.rundhcp">
                        <label class="control-label">ip:</label>

                        <div class="controls">
                            <select ng-disabled="config!='c'" class="span8" ng-model="inst.fixedip"
                                    ng-options="n.address for n in fixedips">
                                <option value="">自动分配</option>
                            </select>
                        </div>
                    </div>

                </label>
            </div>
        </div>
        <div class="span5">
            <div class="alert alert-info alert-pos">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <h4>注!</h4>
                计算方案即是为硬件配置模板，可以选择已有的计算方案，
                可以自己定义计算方案并存为方案。
            </div>
        </div>
    </div>


</fieldset>
<!----------step04-------------->

<fieldset ng-show="current_step==4">
    <legend>{{ steps[3]}}</legend>

    <div class="row-fluid step-pos4">
        <div class="span2">
            <label class="control-label">名字：</label>
        </div>
        <div class="span4">
            <label class="label label-success" ng-show="vm_form.vm_name.$valid">{{ inst.name}}</label>
            <label class="label label-important" ng-show="vm_form.vm_name.$invalid">虚拟机名称只能包含字母和数字</label>
        </div>
        <div class="span2">
            <label class="control-label">集群：</label>
        </div>
        <div class="span4">
            <label class="label label-success">{{ inst.cluster.name }}</label>
            <label class="label label-important" ng-show="vm_form.cluster.$invalid">集群不能为空</label>
        </div>
    </div>

    <div class="row-fluid step-pos4">

        <div class="span2">
            <label class="control-label">主机：</label>
        </div>
        <div class="span4">
            <label class="label label-success">{{ inst.host.host_name||"自动选择"}}</label>
        </div>
        <div class="span2">
            <label class="control-label">虚拟机描述：</label>
        </div>
        <div class="span4">
            <label class="label label-success">{{ inst.desc }}</label>
        </div>
    </div>

    <div class="row-fluid step-pos4">
        <div class="span2">
            <label class="control-label">显示协议：</label>
        </div>
        <div class="span4">
            <label class="label label-success">{{ inst.graphics_type }}</label>
        </div>
        <div class="span2">
            <label class="control-label">模板（ISO）：</label>
        </div>
        <div class="span4">
            <label class="label label-success">{{ inst.source.name}}</label>
        </div>
    </div>

    <div class="row-fluid step-pos4">


        <div class="span2">
            <label class="control-label">cpu：</label>
        </div>
        <div class="span4">
            <label class="label label-success" ng-show="vm_form.vm_cpu.$valid">{{ inst.cpu ||proposal.cpu}}</label>
            <label class="label label-important" ng-show="vm_form.vm_cpu.$invalid">cpu只能是数字，且最大为8</label>
        </div>
        <div class="span2">
            <label class="control-label">内存：</label>
        </div>
        <div class="span4">
            <label class="label label-success">{{ inst.mem ||proposal.memory}}</label>
            <label class="label label-important" ng-show="vm_form.mem.$invalid">内存只能是数字，且最大为128GB</label>
        </div>
    </div>

    <div class="row-fluid step-pos4">
        <div class="span2">
            <label class="control-label">磁盘大小：</label>
        </div>
        <div class="span4">
            <label class="label label-success">{{ inst.disk ||proposal.disk}}</label>
            <label class="label label-important" ng-show="vm_form.disk.$invalid">只能数字</label>
        </div>
        <div class="span2">
            <label class="control-label">存储：</label>
        </div>
        <div class="span4">
            <label class="label label-success">{{ inst.storage.name }}</label>
            <label class="label label-important" ng-show="vm_form.storage.$invalid">存储不能为空</label>
        </div>
    </div>

    <div class="row-fluid step-pos4">

        <div class="span2">
            <label class="control-label">网络：</label>
        </div>
        <div class="span4">
            <label class="label label-success">{{ inst.network.name }}</label>
            <label class="label label-important" ng-show="vm_form.network.$invalid">网络不能为空</label>
        </div>
        <div class="span2">
            <label class="control-label">存为方案：</label>
        </div>
        <div class="span4">
            <input type="checkbox" ng-model="inst.saveproposal"/>
            <input type="text" class="input-mini" ng-required="inst.saveproposal" ng-model="inst.proposalname" ng-disabled="!inst.saveproposal"/>
        </div>
    </div>
</fieldset>

</div>
<div class="modal-footer">
    <button ng-click="prev_step()" ng-hide="current_step == 1" class="btn pull-left btn-primary">上一步</button>
    <button ng-click="next_step()" ng-hide="current_step == 4" class="btn pull-right btn-primary">下一步</button>
    <div ng-show="actiontype=='createvm'">
    <button ng-click="do_upsert()" ng-disabled="!vm_form.$valid" ng-hide="current_step != 4"
            class="btn pull-right btn-primary">确认创建
    </button>
    </div>
    <div ng-show="actiontype=='createtask'">
        <button ng-click="add2task()" ng-disabled="!vm_form.$valid" ng-hide="current_step != 4"
                class="btn pull-right btn-primary">确认
        </button>
    </div>
</div>
</form>
</script>

<script type="text/ng-template" id="template/dialog/message.html">
    <div class="modal-header">
        <h3>{{ title }}</h3>
    </div>
    <div class="modal-body">
        <p>{{ message }}</p>
    </div>
    <div class="modal-footer">
        <button ng-repeat="btn in buttons" ng-click="close(btn.result)" class="btn"
                ng-class="btn.cssClass">{{ btn.label }}</button>
    </div>
</script>